<template>
  <div class="view-box chart-demo">
    <div class=" container">
      <h1>图表示例</h1>
      <div class="flex">
        <el-menu
          :default-active="activeMenu"
          width="100"
          class="el-menu-vertical-demo"
          @select="selectMenu">
          <template v-for="(item,key) in menuList">
            <el-menu-item :index="item.value" :key="key">
              <i class="el-icon-menu"></i>
              <span slot="title">{{item.label}}</span>
            </el-menu-item>
          </template>
        </el-menu>

        <section class="p20 flex1">
          <transition name="fade-transform" mode="out-in">
            <keep-alive>
              <component :is="activeMenu"></component>
            </keep-alive>
          </transition>
        </section>

      </div>
    </div>
  </div>
</template>

<script>
import indexData from './components/indexData';
import lineDemo from './components/lineDemo';
import barDemo from './components/barDemo';
import PieDemo from './components/PieDemo';
import barRankingDemo from './components/barRankingDemo';
import radarDemo from './components/radarDemo';
import gaugeDemo from './components/gaugeDemo';
import funnelDemo from './components/funnelDemo';
import liquidfillDemo from './components/liquidfillDemo';

export default {
  components: {indexData, lineDemo, barDemo, barRankingDemo, PieDemo, radarDemo, gaugeDemo, funnelDemo, liquidfillDemo},
  data () {
    return {
      idDict: this.$store.state.indexIds,
      projectId: sessionStorage.projectId,
      // 菜单
      activeMenu: 'lineDemo',
      menuList: [
        {label: '指标数据参考', value: 'indexData'},
        {label: '折线图', value: 'lineDemo'},
        {label: '柱状图', value: 'barDemo'},
        {label: '排行榜', value: 'barRankingDemo'},
        {label: '饼图', value: 'PieDemo'},
        {label: '雷达图', value: 'radarDemo'},
        {label: '仪表盘', value: 'gaugeDemo'},
        {label: '漏斗图', value: 'funnelDemo'},
        {label: '水球图', value: 'liquidfillDemo'}

      ]
    };
  },
  methods: {
    selectMenu (val) {
      this.activeMenu = val;
    }
  }
};
</script>

<style lang="scss" scope>
.chart-demo {
  h1 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    border-right: none;
  }
  .container {
    padding: 20px;
  }
  .tt {
    font-size: 0.14rem;
    font-weight: bold;
    color: #ff9221;
    margin: 5px 0;
  }
  .content{
    line-height: 0.25rem;
    .td {
      color: #009DFF;;
    }
  }
  pre {
    line-height: 2;
  }
}
</style>
